<template>
  <div class="columns">
    <!--文章详情-->
    <div class="column is-three-quarters">
      <!--主题-->
      <el-card
          class="box-card"
          shadow="never"
      >
        <div
            slot="header"
            class="has-text-centered"
        >
          <p class="is-size-5 has-text-weight-bold">{{ article.title }}</p>
          <div class="has-text-grey is-size-7 mt-3">
            <span>{{ dayjs(article.createTime).format('YYYY/MM/DD HH:mm:ss') }}</span>
            <el-divider direction="vertical"/>
            <span>发布者：{{ author.alias }}</span>
            <el-divider direction="vertical"/>
            <span>查看：{{ article.view }}</span>
          </div>
        </div>

        <!--Markdown-->
        <div id="preview"/>

        <!--标签-->
        <nav class="level has-text-grey is-size-7 mt-6">
          <div class="level-left">
            <p class="level-item">
              <b-taglist>
                <router-link
                    v-for="(tag, index) in tags"
                    :key="index"
                    :to="{ name: 'tag', params: { name: tag.name } }"
                >
                  <b-tag type="is-info is-light mr-1">
                    {{ "#" + tag.name }}
                  </b-tag>
                </router-link>
              </b-taglist>
            </p>
          </div>


        </nav>
      </el-card>

      <lv-comments :slug="topic.id"/>
    </div>

    <div class="column">
      <!--作者-->
      <Author
          v-if="flag"
          :user="author"
      />
      <!--推荐-->
      <recommend
          v-if="flag"
          :topic-id="this.id"
      />
    </div>
  </div>
</template>

<script>
import {deleteTopic, getTopic} from '@/api/post'
import {mapGetters} from 'vuex'
import Author from '@/views/post/Author'
import Recommend from '@/views/post/Recommend'
import LvComments from '@/components/Comment/Comments'
import Vditor from 'vditor'
import 'vditor/dist/index.css'
import {getArticle} from "@/api/article";
import {findById, getInfoById} from "@/api/user";
import {getTagsByArticleId} from "@/api/tag";

export default {
  name: 'TopicDetail',
  components: {Author, Recommend, LvComments},
  computed: {
    ...mapGetters([
      'token', 'user'
    ])
  },
  data() {
    return {
      id: this.$route.params.id,
      authorId: null,
      author: {},
      article: {},
      flag: false,
      topic: {
        content: '',
        id: this.$route.params.id
      },
      tags: [],
      topicUser: {}
    }
  },
  mounted() {
   this.fetchData()
  },
  methods: {
    renderMarkdown(md) {
      Vditor.preview(document.getElementById('preview'), md, {
        hljs: {style: 'github'}
      })
    },
    async fetchData(){
      await this.fetchArticle()
    },
    async fetchArticle() {
      getArticle(this.id).then(res => {
        this.article = res.data
        this.authorId = this.article.userId
        this.renderMarkdown(this.article.content)
        this.fetchAuthor()
        this.fetchTags()
      })
    },
    async fetchAuthor() {
      getInfoById(this.authorId).then(res => {
        this.author = res.data
        this.flag=true
      })
    },
    fetchTags(){
      getTagsByArticleId(this.id).then(res=>{
        this.tags=res.data
      })
    },
    handleDelete(id) {
      deleteTopic(id).then(value => {
        const {code, message} = value
        alert(message)

        if (code === 200) {
          setTimeout(() => {
            this.$router.push({path: '/'})
          }, 500)
        }
      })
    }
  }
}
</script>

<style>
#preview {
  min-height: 300px;
}
</style>
